<template>
    <div id="son2">
        <div class="name">
            <span>{{ iname }}</span>
        </div>
        <div class="showlist">
            <input id="ipt" type="text" v-model="message">
            <input type="text" v-model="message2">
            <button @click="stopWatch">停止监听</button>

        </div>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
    setup() {
        const iname = ref('son2子组件');
        const message = ref('hello');
        const message2 = ref('world');
        /**
         * 1.watchEffect 立即执行传入的一个函数，当依赖项变化的时候，重新执行该函数。
         * 2.与watch相似都可以监听一个数据源但是watchEffect会在初始化的时候调用一次，与watch的immediate类似。
         * 3.watch使用时第一个参数是指定的要监听的数据，第二个参数是执行函数；而watchEffect第一个参数就是执行函数，不用指定
         * 要监听的数据，在函数中使用到的数据就是要监听的数据，即用到哪个就监听哪个；
         * 4.使用变量(stop,非关键字)接收watchEffect()得到一个方法，直接执行该方法即可手动停止监听；
         * 5.第一个参数执行函数也接受一个参数，该参数也是个函数(oninvalidate 非关键字)，当需要在监听前面做一些操作时，可以执行该函数；
         * 6.watchEffect的第一个参数是执行函数，第二个参数是个对象，关键字flush用于控制oninvalidate的执行时机；
         */

        const stop = watchEffect((oninvalidate) => {
            let ipt = document.getElementById('ipt');
            console.log(ipt, 'elelelelelel')
            console.log(message.value, message2.value);
            oninvalidate(() => {
                console.log('我在监听前面就执行了')
            })
        },{flush: 'post'}
        );
        const stopWatch = () => {stop()};
        return {
            iname,
            message,
            message2,
            stopWatch,
        }
    }
}
</script>
<style lang="scss">
    #son2{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid red;
        width: 400px;
        min-height: 100px;
        margin-top: 100px;
        cursor: pointer;
        .name{
            background: palevioletred;
        }
    }
</style>